<template>
  <div>
    <h3>
        About --- {{ count }}
    </h3>
    <h3>
        计算属性: {{ newCount }}
    </h3>
    <button @click="add">+++</button>
    <div>
        <p>姓名： {{ name }}</p>
        <p>年龄： {{ age }}</p>
    </div>
     <!-- <button @click="add">+++</button> -->
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed, watch, watchEffect } from "vue";
// vue2   options Api
// vue3   composition Api
export default {
  setup() {
    // 没有this
    // console.log(this)

    // 1. 返回一个对象
    // let count = 100
    // const add = () => {
    //     count += 1
    //     console.log(count)
    // }
    // const obj = {
    //     name: "张三"
    // }
    // console.log(obj)

    // 在vue3中定义响应式数据
    // 1. 基本类型   ref  在 js 中获取的时候需要.value
    const count = ref(200)
    const add = () => {
        count.value += 1
    }
    // 2. 引用类型  reactive  (返回的时候 如果用... )
    const obj = reactive({
        name: "张三123",
        age: 18
    })
    //   const add = () => {
    //     obj.name = "李四123"
    // }

    // 定义计算属性
    // const newCount = computed(() => {
    //     return  count.value + '------'
    // })

    // watch(count, (newValue, oldValue) => {
    //     console.log('count发生改变了', newValue, oldValue)
    // })

    // 自动执行一次, 自动收集callback中的依赖
    // watchEffect(() => {
    //     console.log('watchEffect', count.value)
    // })

    return {
      count,
      add,
      //   ...obj
      ...toRefs(obj),
      newCount
    }

    // 2.
    // return (h) => {
    //     return h('<h1>1<h1>')
    // }
  },
};
</script>

<style>
</style>